<template>
  <div class="page-miH page-bgBack flex flex-col setting-wrapper">
    <a-row type="flex" class="topline">
      <a-icon type="left" style="font-size:20px;position" @click="goback" />
      <div class="left2" style="cursor: pointer" @click="goback">返回</div>
      <h3>{{ pageTitle }}</h3>
      <a-icon type="add" />
    </a-row>
    <a-row type="flex" class="setting-content">
      <a-col :span="4" style="border-right: 1px solid #e8e8e8">
        <a-menu class="groupleft">
          <a-menu-item
            v-for="item in groupList"
            :key="item.id"
            style="border-bottom: 1px solid #e8e8e8"
            @click="getCategorieslistAll(item.id)"
          >
            <span class="groupname">{{ item.name }}</span>
          </a-menu-item>
        </a-menu>
      </a-col>
      <a-col class="setting-right">
        <div class="bleft">员工端合同详情</div>
        <div class="setting-tip">当员工签署完合同时，员工是否可以查看已签署合同的详情内容。</div>
        <a-select v-model="selectway" placeholder="设置是否允许查看" style="width: 360px" @change="selectSetting">
          <a-select-option v-for="(form, index) in optionlist" :key="index" :value="form.value">
            {{ form.label }}
          </a-select-option>
        </a-select>
      </a-col>
    </a-row>
    <div class="btnline">
      <a-button type="primary" style="margin: 24px" @click="confirmSetting"> 保存 </a-button>
    </div>
  </div>
</template>
<script>
import { findByCompanyId, updateCompanyShow } from "@/api/company/contract";
export default {
  data() {
    return {
      companyId: "",
      pageTitle: "合同设置",
      groupList: [{ name: "显示设置" }],
      selectway: "true",
      optionlist: [
        { label: "员工签署完成后，默认允许查看合同内容", value: "true" },
        { label: "员工签署完成后，默认不允许查看合同内容", value: "false" }
      ]
    };
  },
  created() {
    this.companyId = this.$store.state.hr.companyId;
    this.getCheck(this.companyId);
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    selectSetting(e) {
      this.selectway = e;
    },
    getCheck(companyId) {
      findByCompanyId(companyId).then((res) => {
        this.selectway = res.data.isShow + "";
      });
    },
    confirmSetting() {
      updateCompanyShow(this.companyId, this.selectway).then((res) => {
        this.$message.success("设置成功");
      });
    }
  }
};
</script>
<style lang="scss">
.left2 {
  z-index: 3;
  left: 50px;
  position: absolute;
  color: #595959;
  font-size: 16px;
  margin-top: 2px;
}
.setting-wrapper {
  width: 100%;
  height: 80vh;
  .groupleft {
    .groupname {
      height: 20px;
      padding-left: 10px;
      font-size: 16px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
      line-height: 19px;
      border-left: 3px solid var(--primary);
    }
  }
  .bleft {
    margin: 0;
    height: 20px;
    padding-left: 10px;
    font-size: 16px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
    line-height: 19px;
    border-left: 3px solid var(--primary);
  }
  .setting-content {
    height: 90vh;
    padding: 0 24px;
    .setting-right {
      padding: 24px;
    }
    .setting-tip {
      font-size: 12px;
      color: rgba(102, 102, 102, 1);
      line-height: 42px;
    }
  }
}
</style>
